<template>
  <el-row :gutter="20">
    <el-col :span="24">
      <vab-query-form>
        <vab-query-form-top-panel>
          <el-form :inline="true" label-width="0" @submit.prevent>
            <el-form-item label="">
              <el-input v-model="queryForm.title" />
            </el-form-item>
            <el-form-item label-width="0">
              <el-button
                native-type="submit"
                style="
                  background-color: #58b5e1;
                  color: #fff;
                  border: 0px;
                  font-size: 14px;
                "
                @click="queryData"
              >
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-top-panel>
      </vab-query-form>
    </el-col>

    <el-col v-for="(item, index) in queryIcon" :key="index" :span="6">
      <vab-card shadow="hover" @click="handleIcon(item)">
        <vab-icon :icon="item" />
      </vab-card>
    </el-col>
    <el-col :span="24">
      <el-pagination
        :background="background"
        :current-page="queryForm.pageNo"
        :layout="layout"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </el-col>
  </el-row>
</template>

<script>
  import { defineComponent } from 'vue'
  // import { getIconList } from '@/api/remixIcon'

  export default defineComponent({
    name: 'VabIconSelector',
    emits: ['handle-icon'],
    data() {
      return {
        icon: '24-hours-fill',
        layout: 'total, prev, next',
        total: 0,
        background: true,
        height: 0,
        selectRows: '',
        pickerIcon: [],
        queryIcon: [],
        queryForm: {
          pageNo: 1,
          pageSize: 12,
          title: '',
        },
      }
    },
    created() {
      this.queryData()
    },
    methods: {
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      queryData() {
        const { data } = require('@/extra/VabIconSelector/icon.json')
        let arrTotal = []
        if (this.queryForm.title != '') {
          data.forEach((element) => {
            if (element.indexOf(this.queryForm.title) != -1)
              arrTotal.push(element)
          })
          this.pickerIcon = arrTotal
          console.log(this.pickerIcon)
        } else {
          this.pickerIcon = data
        }

        this.queryForm.pageNo = 1
        this.fetchData()
      },
      async fetchData() {
        // const {
        //   data: { list, total },
        // } = await getIconList(this.queryForm)
        let arrPage = []
        this.total = this.pickerIcon.length
        for (
          let i = (this.queryForm.pageNo - 1) * this.queryForm.pageSize;
          i < (this.queryForm.pageNo - 1) * this.queryForm.pageSize + 12;
          i++
        ) {
          if (i >= this.total) {
            break
          }
          arrPage.push(this.pickerIcon[i])
        }
        console.log(arrPage)
        this.queryIcon = arrPage
      },
      handleIcon(item) {
        this.icon = item
        this.$emit('handle-icon', item)
      },
    },
  })
</script>

<style lang="scss">
  .icon-selector-popper {
    .el-card__body {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 20px;
      cursor: pointer;

      i {
        font-size: 28px;
        color: var(--el-color-grey);
        text-align: center;
        vertical-align: middle;
        pointer-events: none;
        cursor: pointer;
      }
    }

    .el-pagination {
      margin: 0;
    }
  }
</style>
